<template>
	<view class="list-public">
		<template v-if="listState == 'success'">
			<view
				@click="$_To('post/post?pid='+item.pid)"
				class="for"
				v-for="item in list">
				<!-- 块.1 - 用户展示 -->
				<view
					class="user Flex"
					@click.stop="$_To('user/user?uid=' + item.author.uid)">
					<view class="left">
						<view class="avatar">
							<image :src="item.author.avatar" mode="widthFix"></image>
						</view>
						<view
							:style="item.author.nicknameColor?'background:'+item.author.nicknameColor+';':'background: #C0C4CC;'"
							class="right-bottom">{{item.author.roleName?item.author.roleName[0]:'匿'}}</view>
					</view>
					<view class="center">
						<view class="center-top">
							<view class="nickname H2">{{item.author.nickname?item.author.nickname:'匿名'}}</view>
						</view>
						<view class="center-bottom Flex">
							<text class="P" :style="item.author.nicknameColor?'color:'+item.author.nicknameColor+';':''">{{item.author.roleName?item.author.roleName:'匿名'}}</text>
							<text class="P">{{item.createdTimeAgo}}</text>
						</view>
					</view>
					<view class="right Flex">
						<view class="button Flex">
							<text class="P">查看用户</text>
						</view>
					</view>
				</view>
				<view
					class="title"
					v-if="item.title">{{item.title}}</view>
				<!-- 文字摘要 -->
				<view
					class="content H2 three">{{$_filterHtml(item.content)}}</view>
				<!-- 图片列表 -->
				<view
					class="image Flex"
					v-if="item.files.images.length">
					<view
						v-for="(item_Tu,index) in item.files.images">
						<image :src="item_Tu.imageRatioUrl" mode="widthFix"></image>
					</view>
				</view>
				<!-- 视频列表 -->
				<view class="video" v-if="!item.files.images.length && item.files.videos.length">
					<view class="picture-cover">
						<image :src="item.files.videos[0].videoPosterUrl" mode="widthFix"></image>
					</view>
					<text class="Flex iconfont icon-play"></text>
				</view>
				<!-- 评论列表 -->
				<view
					class="comment Flex"
					v-if="item.previewComments">
					<view class="_avatar">
						<image :src="item.previewComments[0].author.avatar" mode="widthFix"></image>
					</view>
					<view class="_nickname">{{item.previewComments[0].author.nickname}}:</view>
					<view class="_content one">
						<text class="iconfont icon-yuyin" v-if="item.previewComments[0].files.audios.length"></text>{{$_filterHtml(item.previewComments[0].content)}}
					</view>
				</view>
				<!-- 帖子类型 -->
				<view class="type Flex" v-if="item.files.images.length||item.files.videos.length||item.files.audios.length">
					<text class="Bj-LanSe iconfont icon-tupian" v-if="item.files.images.length"></text>
					<text class="Bj-HongSe iconfont icon-zhibo" v-if="item.files.videos.length"></text>
					<text class="Bj-LvSe iconfont icon-yuyin" v-if="item.files.audios.length"></text>
				</view>
				<!-- 尾部图标 -->
				<view class="_iconfont Flex">
					<view class="Flex">
						<text class="iconfont icon-comment"></text>
						<text class="Zi">{{item.commentCount}}</text>
					</view>
					<view class="Flex">
						<text class="iconfont icon-good"></text>
						<text class="Zi">{{item.likeCount}}</text>
					</view>
					<view class="Flex">
						<text class="iconfont icon-favorite"></text>
						<text class="Zi">{{item.followCount}}</text>
					</view>
				</view>
			</view>
			<view
				@click="getList('more')"
				class="more">点击加载更多</view>
		</template>
		<template v-if="listState == 'loading'">
			<public-loading></public-loading>
		</template>
		<template v-if="listState == 'empty'">
			<public-empty></public-empty>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Hid:"",
				list:[],
				listState:"loading",
				listPage:2,
			}
		},
		onLoad(e) {
			this.Hid = e.hid;
			uni.setNavigationBarTitle({ title: this.Hid })
			this.getDetail()
		},
		methods: {
			// 请求话题详情
			getDetail(){
				this.$_Request(
					"GET","/api/v2/hashtag/"+this.Hid+"/detail",{},
					(res) => {
						this.hashtagTitle = res.data.data.detail.hname;
						uni.setNavigationBarTitle({ title:this.hashtagTitle })
						this.getList()
					}
				)
			},
			// 请求话题详情
			getList(more){
				if(more == 'more'){uni.showLoading({ title: "加载中" });}
				this.$_Request(
					"GET","/api/v2/post/list?hid="+this.Hid,
					{
						"page":more == 'more' ? this.listPage : "",
						"whitelistKeys":"pid,author.uid,author.avatar,author.nicknameColor,author.roleName,author.nickname,createdTimeAgo,title,content,commentCount,likeCount,followCount,files,previewComments.0.author.avatar,previewComments.0.author.nickname,previewComments.0.files.audios,previewComments.0.content"
					},
					(res) => {
						if(more == 'more'){
							if(res.data.data.list.length){
								this.list = this.list.concat(res.data.data.list);
								this.listPage++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							if(res.data.data.list.length){
								this.list = res.data.data.list;
								this.listState = "success"
							}else{
								this.listState = "empty"
							}
						}
					}
				)
			},
		},
		// 微信分享
		onShareAppMessage(res) {
			return {
				title: this.hashtagTitle,
				path: '/pages/hashtag/hashtag?hid=' + this.Hid
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: this.hashtagTitle,
				path: '/pages/hashtag/hashtag?hid=' + this.Hid
			}
		},
	}
</script>

<style lang="scss">
.list-public{
	.for{
		padding: 25rpx;
		border-bottom: 25rpx solid $BeiJingSe;
		.title{
			font-weight: bold;
			margin-top: 25rpx;
		}
		.content{
			word-break: break-all;
			margin-top: 20rpx;
		}
		.image{
			flex-wrap: wrap;
			margin-top: 15rpx;
			width: 700rpx;
			view{
				width: 228.5rpx;
				height: 150rpx;
				overflow: hidden;
				border-radius: 5rpx;
				margin-top: 10rpx;
				background: $BeiJingSe;
				box-shadow: 0 0 1rpx $ZhanWeiSe;
			}
			view:nth-child(2),view:nth-child(5),view:nth-child(8){
				margin: 10rpx 10rpx 0 10rpx;
			}
			// #ifdef MP-WEIXIN
			view{
				margin-top: 8rpx;
			}
			view:nth-child(2),view:nth-child(5),view:nth-child(8){
				margin: 8rpx 8rpx 0 8rpx;
			}
			// #endif
		}
		.video{
			margin-top: 25rpx;
			width: 100%;
			height: 300rpx;
			overflow: hidden;
			border-radius: 10rpx;
			position: relative;
			.picture-cover{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				height: 300rpx;
				overflow: hidden;
			}
			.icon-play{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				width: 100%;
				height: 300rpx;
				align-items: center;
				justify-content: center;
				color: #FFF;
				text-shadow: 0 0 1rpx #000;
				font-size: 100rpx;
				line-height: 100rpx;
				background-color:rgba(0,0,0,0.5);
			}
		}
		
		.comment{
			align-items: center;
			background: $BeiJingSe;
			margin-top: 25rpx;
			padding:20rpx;
			border-radius: 100rpx;
			._avatar{
				width: 50rpx;
				height: 50rpx;
				border-radius: 100rpx;
				overflow: hidden;
			}
			._nickname{
				line-height: 32rpx;
				flex-shrink: 0;
				color: $LanSe;
				margin: 0 15rpx;
			}
			._content{
				line-height: 32rpx;
				flex: 1;
				color: $FuZhuSe;
				.icon-yuyin{
					font-size: 22rpx;
					line-height: 22rpx;
					color: $LvSe;
					padding-right: 5rpx;
				}
			}
		}
		.type{
			align-items: center;
			justify-content: flex-end;
			margin-top: 25rpx;
			text{
				margin-left: 10rpx;
				color: #FFF;
				font-size: 18rpx;
				line-height: 18rpx;
				padding: 5rpx;
				border-radius: 2rpx;
			}
		}
		._iconfont{
			justify-content:space-between;
			border-top: 1rpx solid $BeiJingSe;
			margin-top: 25rpx;
			padding-top: 25rpx;
			view{
				align-items: center;
				.iconfont{
					font-size: 40rpx;
					line-height: 40rpx;
					padding-right: 15rpx;
				}
				.Zi{
					font-size: 32rpx;
					line-height: 32rpx;
				}
			}
		}
	}
	.user{
		.left{
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			position: relative;
			.avatar{
				width: 80rpx;
				height: 80rpx;
				overflow: hidden;
				border-radius: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				background: $BeiJingSe;
			}
			.right-bottom{
				width: 30rpx;
				height: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 2;
				border: 1px solid #FFF;
				color: #FFF;
				font-size: 18rpx;
				line-height: 18rpx;
				border-radius: 100rpx;
			}
		}
		.center{
			flex: 1;
			height: 80rpx;
			overflow: hidden;
			margin: 0 20rpx;
			.center-top{
				align-items: center;
				padding-top: 5rpx;
				.nickname{
					line-height: 32rpx;
				}
				.P{
					padding-left: 15rpx;
				}
			}
			.center-bottom{
				margin-top: 15rpx;
				text{
					line-height: 22rpx;
					padding-right: 15rpx;
				}
			}
		}
		.right{
			height: 80rpx;
			align-items: center;
			.button{
				align-items: center;
				border: 1rpx solid $JuHuang;
				border-radius: 100rpx;
				height: 50rpx;
				padding: 0 20rpx;
				text{
					color: $JuHuang;
					line-height: 22rpx;
				}
				.iconfont{
					font-size: 28rpx;
					line-height: 28rpx;
				}
			}
		}
	}
	.three{
		display: -webkit-box;
		/*!autoprefixer:off*/
		-webkit-box-orient: vertical;
		/*autoprefixer:on*/
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
	.one{
		display: -webkit-box;
		/*!autoprefixer:off*/
		-webkit-box-orient: vertical;
		/*autoprefixer:on*/
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.more{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		line-height: 28rpx;
		color: $ZhanWeiSe;
		padding: 35rpx 0;
	}
}
</style>
